<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>与合约进行交互，监听合约事件Demo</title>

  <link rel="stylesheet" type="text/css" href="main.css">

  <script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script>

</head>

<body>
  <div class="container">

    <h1> 与合约进行交互，监听合约事件 Demo</h1>

    <h2 id="info"></h2>

    <img id="loader" src="https://loading.io/spinners/double-ring/lg.double-ring-spinner.gif">

    <label for="name" class="col-lg-2 control-label">姓名：</label>
    <input id="name" type="text">

    <label for="name" class="col-lg-2 control-label">年龄：</label>
    <input id="age" type="text">

    <button id="button">更新</button>



    <div>
      注：此Demo是视频课程：
      <a href="https://wiki.learnblockchain.cn/course/dapp.html" target="_blank">区块链全栈-以太坊DAPP开发实战</a> 所使用案例讲解之一，想要学习去中心化应用开发，这门课程不容错过。
      <br/>
      因合约部署在Ropsten网络，因此需要把MetaMask切换到Ropsten，Demo代码地址见
      <a href="https://github.com/xilibi2003/DAppDemos" target="_blank">链接</a>
    </div>


  </div>

  <script src="jquery.js"></script>

  <script>
    if (typeof web3 !== 'undefined') {
      web3 = new Web3(web3.currentProvider);
      console.log("web3" + web3);
    } else {
      $("#info").html("No web3? 需要安装<a href='https://metamask.io/'>MetaMask</a>!");
      // set the provider you want from Web3.providers
      // web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:7545"));
    }

    web3.eth.defaultAccount = web3.eth.accounts[0];

    var infoContract = web3.eth.contract([{
        "anonymous": false,
        "inputs": [{
            "indexed": false,
            "name": "name",
            "type": "string"
          },
          {
            "indexed": false,
            "name": "age",
            "type": "uint256"
          }
        ],
        "name": "Instructor",
        "type": "event"
      },
      {
        "constant": false,
        "inputs": [{
            "name": "_fName",
            "type": "string"
          },
          {
            "name": "_age",
            "type": "uint256"
          }
        ],
        "name": "setInfo",
        "outputs": [],
        "payable": false,
        "stateMutability": "nonpayable",
        "type": "function"
      },
      {
        "constant": true,
        "inputs": [],
        "name": "getInfo",
        "outputs": [{
            "name": "",
            "type": "string"
          },
          {
            "name": "",
            "type": "uint256"
          }
        ],
        "payable": false,
        "stateMutability": "view",
        "type": "function"
      }
    ]);

    var info = infoContract.at('0xcb02d3f1bf9fbe957f1969192f70787b0bffc3c3');
    info.getInfo(function(error, result) {
      $("#loader").hide();
      if (!error) {
        $("#info").html(result[0] + ' (' + result[1] + ' years old)');
        console.log(result);
      } else {
        console.error(error);
      }

    });

    var instructorEvent = info.Instructor();
    instructorEvent.watch(function(error, result) {
      if (!error) {
        $("#loader").hide();
        $("#info").html(result.args.name + ' (' + result.args.age + ' years old)');
      } else {
        $("#loader").hide();
        console.log(error);
      }
    });

    $("#button").click(function() {
      $("#loader").show();
      info.setInfo($("#name").val(), $("#age").val());
    });
  </script>

</body>

</html>
